<template>
  <div
    :id="id"
    :style="{
      width: width,
      height: height
    }"
    v-echart-resize
  ></div>
</template>

<script setup>
import { defineProps, onMounted, onUnmounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { unwarp } from '@/utils/commUtils'

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  value: {
    type: Object,
    default: () => {}
  }
})
const chart = ref(null)
const setOptions = (item) => {
  if (item === undefined) return
  const data = []
  const lineData = []
  for (let index in item) {
    data.push({
      bl: item[index].count,
      ny: item[index].unitName
    })
    lineData.push(item[index].failurerCount)
  }
  const xData = []
  const yData = []
  const seriesdataBj = []
  data.map((a, b) => {
    xData.push(a.ny)
    if (a.bl === 0) {
      yData.push({ name: a.ny, value: a.bl })
    } else {
      yData.push({ name: a.ny, value: a.bl })
    }
    seriesdataBj.push(100)
  })

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          opacity: 0
        }
      },
      formatter: function (prams) {
        return `${prams[0].marker}${prams[0].seriesName}: ${prams[0].value}<br/>
        ${prams[2].marker}${prams[2].seriesName}: ${prams[2].value}`
      }
    },
    legend: {
      data: ['使用率'],
      show: false
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '5%',
      top: '13%',
      height: '85%',
      containLabel: true,
      z: 22
    },
    xAxis: [
      {
        type: 'category',
        gridIndex: 0,
        data: xData,
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          lineStyle: {
            color: '#DDDDDD'
          }
        },

        axisLabel: {
          show: true,
          textStyle: {
            color: '#74797E'
          }
          //  color: 'black',
          //  rotate:60
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        nameTextStyle: {
          color: 'rgb(170,170,170)'
        },
        // max: 100,
        min: 0,
        gridIndex: 0,
        minInterval: 1,
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#DDDDDD',
            width: 1
          }
        },
        axisLabel: {
          color: 'black',
          formatter: '{value}'
        }
      },
      {
        type: 'value',
        gridIndex: 0,
        min: 0,
        // max: 100,
        splitNumber: 12,
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.5)']
          }
        }
      }
    ],
    series: [
      {
        name: '设备总数',
        type: 'bar',
        barWidth: '30px',
        xAxisIndex: 0,
        yAxisIndex: 0,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: '#78AEF9'
          }
        },
        data: yData,
        zlevel: 11
      },
      {
        name: '',
        type: 'bar',
        barWidth: '30px',
        xAxisIndex: 0,
        yAxisIndex: 1,
        barGap: '-100%',
        data: seriesdataBj,
        itemStyle: {
          normal: {
            color: '#dfecfe',
            barBorderRadius: 30
          }
        },
        zlevel: 9
      },
      {
        name: '故障数',
        data: lineData,
        type: 'line',
        zlevel: 12,
        barWidth: 30,
        symbolSize: 8,
        itemStyle: {
          color: '#ffe763',
          normal: {
            lineStyle: {
              // 系列级个性化折线样式
              width: 2,
              type: 'solid',
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#0072FF'
                },
                {
                  offset: 1,
                  color: '#00C6FF'
                }
              ]) //线条渐变色
            }
          }
        }
      }
    ]
  }

  unwarp(chart.value).setOption(option)
}

const initChart = () => {
  setTimeout(() => {
    if (!chart.value) {
      chart.value = echarts.init(document.getElementById(props.id))
    }
    setOptions()
  }, 0)
}

onMounted(() => {
  initChart()
})

onUnmounted(() => {
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
})

watch(
  () => props.value,
  () => {
    setOptions(props.value)
  }
)
</script>

<style lang="scss" scoped>
</style>
